<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>安米网 - IamPHP 免费开源项目</title>
</head>

<body>
    <style>
        body {
            margin: auto;
        }

        a {
            outline: 0;
            text-decoration: none;
        }

        .header {
            background: #32393e;
            color: #FFFFFF;
        }

        .header-main {
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 900px;
        }

        .header a {
            display: block;
            line-height: 60px;
            width: 80px;
            text-align: center;
            color: #FFFFFF;
        }

        .logo {
            display: block;
            margin-left: 15px;
            height: 30px;
            width: 90px;
        }

        .header-link {
            display: flex;
        }

        .content {
            max-width: 900px;
            margin: auto;
        }

        .header-word {
            height: 240px;
            font-size: 24px;
            justify-content: center;
            padding: 0 15px;
        }

        .header-nav-bg {
            background: rgba(0, 0, 0, 0.4);
        }

        .link-gitee {
            text-align: center;
            line-height: 120px;
        }

        .link-gitee a {
            padding: 20px;
            color: #0894ec;
            border: 1px solid #0894ec;
            border-radius: 3px;
        }

        .footer {
            padding: 10px;
            text-align: center;
            color: #636e75;
            font-size: 14px;
        }

        .footer a {
            color: #32393e;
        }

        .iam-word {
            text-align: center;
            font-size: 14px;
            color: #636e75;

        }

        .gar {
            text-align: center;
            color: #636e75;
            font-size: 14px;
        }

        .card {
            background: #fff;
            box-shadow: 0 1px 4px #c8cfd1;
            margin: 10px;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
        }

        .card.card-line {
            box-shadow: none;
            margin: 0;
            margin-top: 10px;
        }

        .card-header {
            position: relative;
            padding: 10px 15px;
            border-radius: 2px 2px 0 0;
        }

        .card-header:before {
            position: absolute;
            content: '';
            width: 100%;
            left: 0;
            bottom: 0;
            height: 1px;
            background: #ddd;
            display: block;
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            transform: scaleY(0.5);
        }

        .card-content {
            padding: 10px 15px;
            border-radius: 0.1rem 0.1rem 0 0;
        }

        .card-footer {
            position: relative;
            display: flex;
            padding: 10px 15px;
            border-radius: 2px 2px 0 0;
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }

        .card-footer:after {
            position: absolute;
            content: '';
            width: 100%;
            left: 0;
            top: -1px;
            height: 1px;
            background: #ddd;
            display: block;
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            transform: scaleY(0.5);
        }
        .show-card {
            margin: 60px 0;
            display: flex;
        }
        .show-card .card {
            flex: 1;
        }
        .show-card .card-header {
            font-size: 20px;
        }
        .show-card .card-content {
            color: #636e75;
            line-height: 28px;
            font-size: 15px;
        }
    </style>
    <div class="header">
        <div class="header-nav-bg">
            <div class="header-main">
                <img src=""
                    alt="logo" class="logo">
                <div class="header-link">
                    <a href="/">首页</a>
                    <a href="https://gitee.com/ianmi/novel">码云</a>
                </div>
            </div>
        </div>
        <div class="header-main header-word">
            优雅、轻快、简洁、一款免费开源的H5、APP接口开发系统
        </div>
    </div>
    <div class="content">
        <div class="link-gitee">
            <a href="https://gitee.com/ianmi/novel">码云下载 v1.2.1</a>
        </div>
        <div class="iam-word">
            一款PHP开发的免费开源软件，可创建H5网站，APP接口
        </div>
        <div class="show-card">
            <div class="card">
                <div class="card-header">开源免费</div>
                <div class="card-content">只为打造一款出色的新一代面向API的程序</div>
            </div>

            <div class="card">
                <div class="card-header">H5</div>
                <div class="card-content">全面拥抱HTML5，美观，大方，跨平台，功能强大</div>
            </div>
        </div>
        <div class="show-card">

            <div class="card">
                <div class="card-header">APP</div>
                <div class="card-content">同一个地址，不同的展示，完美支持APP后台程序</div>
            </div>

            <div class="card">
                <div class="card-header">API</div>
                <div class="card-content">可以作为任何程序的接口使用，标准JSON作为API</div>
            </div>
        </div>
    </div>
    
    <div class="gar">本项目虽然是个人项目，但是我依旧会坚持长期更新，并且永久免费！</div>
    <div class="footer">
        CopyRight©2018 IamPHP H5开发、APP接口开发系统 All Rights Reserved <a href="http://www.miitbeian.gov.cn/">蜀ICP备16026555号-1</a>
    </div>
</body>

</html>